<template>
  <div class="app-container">

  <!--
    对话框（2）：选择物料
    -->
  <el-dialog v-dialogDrag v-dialogDragWidth :title="dialog_selectItem.title" :visible.sync="dialog_selectItem.visible" width="1100px" append-to-body>
    <el-row :gutter="20">
    <el-col :span="4" :xs="24">
      <!--组别数据-->
      <div class="head-container">
        <el-input
          v-model="groupName"
          placeholder="请输入组别名称"
          clearable
          size="small"
          prefix-icon="el-icon-search"
          style="margin-bottom: 20px"
        />
      </div>
      <div class="head-container">
        <el-tree
          :data="groupsOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          default-expand-all
          @node-click="handleNodeClick"
        />
      </div>
    </el-col>

    <el-col :span="20" :xs="24">
      <!-- 检索条件 -->
      <el-form :model="dialog_selectItem.queryParams" :inline="true" v-show="dialog_selectItem.showSearch" label-width="68px">
      <!-- 物料名称 -->
      <el-form-item label="物料名称" prop="itemName">
        <el-input
          v-model="dialog_selectItem.queryParams.itemName"
          placeholder="请输入物料名称"
          clearable
          size="small"
          @keyup.enter.native="getList_items"
        />
      </el-form-item>

      <!-- 物料编码 -->
      <el-form-item label="物料编码" prop="itemNum">
        <el-input
          v-model="dialog_selectItem.queryParams.itemNum"
          placeholder="请输入物料编码"
          clearable
          size="small"
          @keyup.enter.native="getList_items"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini"
                   @click="getList_items">搜索</el-button>
      </el-form-item>

    </el-form>
      <!-- 列表 -->
      <el-table
      v-loading="loading"
      :data="dialog_selectItem.itemList"
      row-key="itemUuid"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="物料名称" align="center" prop="itemName" />
      <el-table-column label="物料编码" align="center" prop="itemNum" width="160"/>

        <el-table-column label="规格" align="center" key="itemSpecification" prop="itemSpecification"
                         :show-overflow-tooltip="true"/>
        <el-table-column label="计量单位" align="center" prop="wmsDictMeasuringUnit" width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.wms_dict_measuring_unit" :value="scope.row.wmsDictMeasuringUnit"/>
          </template>
        </el-table-column>
      <el-table-column label="组别" align="center" key="groupName" prop="wmsItemGroups.groupName"
                         :show-overflow-tooltip="true"/>
      <el-table-column label="请选择" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="success" plain
                     size="small"
                     icon="el-icon-check"
                     @click="selectItem_done(scope.row)"
          ><span> 选择</span></el-button>
        </template>
      </el-table-column>

    </el-table>
    </el-col>

    </el-row>

    <pagination
      v-show="dialog_selectItem.total>0"
      :total="dialog_selectItem.total"
      :page.sync="dialog_selectItem.queryParams.pageNum"
      :limit.sync="dialog_selectItem.queryParams.pageSize"
      @pagination="getList_items"
    />

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialog_hide_selectItem">取 消</el-button>
    </div>

  </el-dialog>
</div>
</template>

<script>
import { unallocatedUserList, authUserSelectAll } from "@/api/system/role";
import {listWmsItems} from "@/api/wms/wmsItems";
import {treeselect} from "@/api/wms/wmsItemGroups";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  dicts: ['sys_normal_disable','wms_dict_measuring_unit'],
  components: {Treeselect},
  props: {
    // 角色编号
    roleId: {
      type: [Number, String]
    }
  },
  data() {
    return {

      dialog_selectItem: {
        visible: false,
        showSearch: true,
        title: "请选择物料",
        total: 0,
        itemList: [],
        queryParams:{
          pageNum: 1,
          pageSize: 10,
          itemName: null,
          itemNum: null,
          groupId: null,
        }
      },

      // 遮罩层
      loading: true,
      groupsOptions:[],
      // 遮罩层
      visible: false,
      groupName: undefined,
      dateRange: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 选中数组值
      userIds: [],
      // 总条数
      total: 0,
      // 未授权用户数据
      userList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleId: undefined,
        userName: undefined,
        phonenumber: undefined
      },
      selectedUser: {
        id: null,
        nickName: null,
        userName: null
      }
    };
  },
  created() {
    this.getList();
    this.getTreeselect();
  },
  watch: {
    // 根据名称筛选部门树
    groupName(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    /** 读取列表：物料 */
    getList_items() {
      this.loading = true;
      listWmsItems(this.dialog_selectItem.queryParams).then(response => {
        console.log( response )
        this.dialog_selectItem.itemList = response.rows;
        this.dialog_selectItem.total = response.total;
        this.loading = false;
      });
    },



    // 完成：选择物料
    selectItem_done(user) {


      this.dialog_selectItem.visible = false;
      this.$emit("ok", user );

      console.log( user )
      // this.dialog_hide_selectItem()
      // this.form.fkItemUuid = row.itemUuid
      // this.form.selectedItem = `${row.itemName}（物料编码：${row.itemNum}）`
      // this.form.selectedItem_tooltip = `物料的唯一标识：${row.itemUuid}`
    },

    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.groupsOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      console.log(data)
      this.dialog_selectItem.queryParams.groupId = data.id;
      this.getList_items();
    },

    // 对话框：显示 - 选择物料
    dialog_show_selectItem() {
      this.getList_items()
      // this.form.selectedItem_tooltip = `请选择物料`
      this.dialog_selectItem.visible = true;
      this.dialog_selectItem.title = "选择物料";
    },

    // 对话框：隐藏 - 选择物料
    dialog_hide_selectItem() {
      this.dialog_selectItem.visible = false;
    },

    // 显示弹框
    show() {
      this.dialog_show_selectItem()
      // console.log('show()')
      // this.queryParams.roleId = this.roleId;
      // this.getList();
      // this.visible = true;
    },
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.userIds = selection.map(item => item.userId);
    },
    // 查询表数据
    getList() {
      unallocatedUserList(this.queryParams).then(res => {
        this.userList = res.rows;
        this.total = res.total;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },


    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },


    /** 选择用户：完成 */
    selectUser_done( user ) {
      this.visible = false;
      this.$emit("ok", user );
    },


    /** 选择授权用户操作 */
    handleSelectUser() {
      const roleId = this.queryParams.roleId;
      const userIds = this.userIds.join(",");
      console.log( roleId )
      console.log( userIds )

      // this.selectedUser = {
      //   id:
      // }

      this.$emit("ok");
      // authUserSelectAll({ roleId: roleId, userIds: userIds }).then(res => {
      //   this.$modal.msgSuccess(res.msg);
      //   if (res.code === 200) {
      //     this.visible = false;
      //     console.log( roleId )
      //     this.$emit("ok");
      //   }
      // });
    }
  }
};
</script>
